<template>
	<view>
		<view class="cu-list menu-avatar">
      <view class="message-top">
        <view class="margin-left" style="font-weight: bold;font-size: 18px">消息列表</view>
        <view class="flex align-center margin-right" style="color: #999999;" @tap="clear">
          <image class="margin-right" style="width: 16px;height: 16px" :src="`${$hd.baseUrl}/images/icon-clear.png`" alt=""/>
          <view>清除未读消息({{total}})</view>
        </view>
      </view>
			<view class="cu-item" @click="onClick">
				<view class="cu-avatar lg bg-white" :style="{'background-image':`url(${$hd.baseUrl}/images/${theme}/icon-inf-service.png)`}">
				</view>
				<view class="content">
					<view class="text-black">客服服务</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
              {{ customerContent }}
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{ customerLastTime | formatTime }}</view>
          <view v-if="customerCount>0" class="cu-tag round bg-red sm"> {{ customerCount }} </view>
				</view>
			</view>

			<view class="cu-item" @click="goMessageCenter()">
				<view class="cu-avatar lg bg-white" :style="{'background-image':`url(${$hd.baseUrl}/images/icon-inf-order.png)`}">
				</view>
				<view class="content">
					<view class="text-black">
						<view class="text-cut">消息中心</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut" v-if='count > 0 && message.messageType == 2'>
							{{ message.notification }}
						</view>
            <view class="text-cut" v-else-if='count>0&&message.messageType==3'>
              {{ message.content }}
            </view>
            <view class="text-cut" v-else-if='count>0&&message.messageType==4'>
              {{ message.content }}
            </view>
            <view class="text-cut" v-else-if='count>0'>
              您有一条新消息
            </view>
            <view class="text-cut" v-else>
              暂无新消息
            </view>
					</view>
				</view>
				<view class="action" v-if='count>0'>
					<view class="text-grey text-xs">{{ message.lastTime | formatTime }}</view>
          <view  class="cu-tag round bg-red sm"> {{ count }} </view>
				</view>
			</view>
		</view>
		<TabBar current="message"></TabBar>
	</view>
</template>

<script>
	import TabBar from '@/components/tabBar/index.vue'
	import {
		mapGetters
	} from 'vuex'
export default {
	components: {TabBar},
	computed: {
		...mapGetters(['theme'])
	},
		data() {
			return {
			  total:'',
			  count:"",
        type1:"",
        message:"",
        customerContent:this.$store.state.message.customer.content,
        customerCount:this.$store.state.message.customer.count,
        customerLastTime:this.$store.state.message.customer.lastMessageTime
			}
		},
    filters: {
      formatTime(dateStr) {
        if (!dateStr) return ''
        const date = new Date(dateStr)
        const hours = date.getHours().toString().padStart(2, '0')
        const minutes = date.getMinutes().toString().padStart(2, '0')
        return `${hours}:${minutes}`
      },
    },
    onHide() {
      uni.$off("socketMessage")
      uni.$off("orderMessage")
    },
    onShow(){
		if(this.theme == 'farmer') {
			uni.setNavigationBarColor({
				backgroundColor: '#0BCA89',
				frontColor: '#ffffff'
			});
		} else {
				uni.setNavigationBarColor({
					backgroundColor: '#006BFE',
					frontColor: '#ffffff',
				});
			}
		
      this.getMessageType();
      this.getMessageCount();
      this.getSocket();
      //更新客服
      uni.$on("socketMessage", data => {
        this.getSocket();
      });
      //更新消息中心
      uni.$on("orderMessage", data => {
        this.getMessageType();
        this.getMessageCount();
      });
    },
	onLoad() {
		// setTimeout(() => {
			
		// }, 500)
	},
		methods: {
			onClick() {
				uni.navigateTo({
					url: '/pages/customerService/index'
				})
			},
      getSocket(){
        this.customerContent=this.$store.state.message.customer.content;
        this.customerCount=this.$store.state.message.customer.count;
        this.customerLastTime=this.$store.state.message.customer.lastMessageTime;
        this.total=this.$store.state.message.unreadCount;
        console.log("消息总数",this.total)
      },
      goMessageCenter(){
        uni.navigateTo({
          url: `/pages/messageCenter/index`,
        })
      },
      //清除所有未读消息
      clear(){
        if(this.total>0){
          this.$http.get('/socketMsg/isReadAll').then(res => {
            if(res.code!=200){
              uni.$uv.toast(res.msg)
              return;
            }
            this.$store.commit("message/clear_customer_count")
            this.getSocket()
            this.$store.commit("message/update_tabs")
            this.getMessageCount();
          })
        }
      },
      //分组未读消息数量
      async getMessageType(){
        await this.$http.get('/socketMsg/countUnreadMessagesById',{ params: { theme: this.theme } }).then(res => {
          this.message=res.data[0];
          // //消息类型 1--客服消息，2--订单消息，3--支付消息，4--系统消息
          // this.type1 = res.data.filter(item => item.messageType === "1");

        })
      },
      //总未读消息数量
      async getMessageCount(){
        await this.$http.get('/socketMsg/countUnreadMessages',{ params: { theme: this.theme } }).then(res => {
          this.count=res.data.messageCenter
          this.$store.dispatch("message/updateMessage");
        }).catch(error=>{

        })

      }
		}
	}
</script>

<style>
.message-top{
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
</style>
